<template>
  <div class="container layui-container fly-marginTop fly-user-main">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
      <li class="layui-nav-item layui-nav-itemed" v-for="(item, index) in list" :key="'icon' + index">
        <router-link :to="{name: item.link}" :active-class="item.activeClass">
          <i :class="[item.icon, {'community-icon': !item.useLayui, 'layui-icon': item.useLayui}]"></i>{{item.name}}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Center',
  data () {
    return {
      list: [{
        name: '我的主页',
        icon: 'icon-zhuye',
        link: 'User'
      }, {
        name: '用户中心',
        icon: 'layui-icon-user',
        link: 'Center',
        useLayui: true
      }, {
        name: '基本设置',
        icon: 'icon-shezhi',
        link: 'info',
        activeClass: 'layui-this'
      }, {
        name: '我的帖子',
        icon: 'icon-tiezi',
        link: 'mypost',
        activeClass: 'layui-this'
      }, {
        name: '我的消息',
        icon: 'icon-xiaoxi',
        link: 'Msg'
      }, {
        name: '其他设置',
        icon: 'icon-shezhi01',
        link: 'Others'
      }]
    };
  }
};
</script>
<style scoped lang="scss">
@import '../assets/custom/iconfont.css';

.community-icon {
  margin-right: 15px;
}
</style>
